<template>
    <div >
        <van-swipe class="swiper" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in banner" :key="index"><img :src="item.banner" alt=""></van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import banner1 from '../.././assets/banner.webp'
import banner2 from '../.././assets/banner1.webp'
import banner3 from '../.././assets/banner2.webp'

export default {
    data(){
        return{
            banner:[
                {banner:banner1},
                {banner:banner2},
                {banner:banner3}
            ],
        }
    }
}
</script>

<style lang="scss" scoped>
    .swiper{
        width: 95%;
        margin: 10px auto ;
        height: 90px;
        border-radius: 5px;
        background: aqua;
    }
    .swiper img{
        width: 100%;
        border-radius: 5px;
    }
</style>